<script lang="ts" setup>
import { useCourseStore } from '@/stores/useCourseStore'; // 从Pinia获取store
import { computed, onMounted, ref, watch } from 'vue';
import StudyCard from './StudyCard.vue'; // 导入StudyCard组件
import { useStudyTreeStore } from '@/stores/useStudyTreeStore'; // 引入 Pinia store
import { getIcon } from "@/api/assets/assets"; // 导入 SkillCard 组件
import type { Card } from '@/types/course/card';

// 根据传输属性确定是课程还是技能树
const props = defineProps<{
  cardType: string; // course课程 skill技能树
}>();

const courseStore = useCourseStore();
const studyTreeStore = useStudyTreeStore();

// 初始化为一个空的计算属性
const cardDataList = ref<Card[]>([]);

// 初始化获取假数据图像
const icon1 = ref<string>("")
const icon2 = ref<string>("")
const icon3 = ref<string>("")

const fetchIcon = async () => {
  try {
    const data = await getIcon([
      '331.png',
      '303.png',
      '256.jpg',
    ]);
    icon1.value = data['331.png'];
    icon2.value = data['303.png'];
    icon3.value = data['256.jpg'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

const fetchCardData = async () => {
  // note: 依据卡片类型不同，获取不同的数据
  if (props.cardType === '课程') {
  // 使用 Pinia 的 useCourseStore 获取课程数据

    // 使用 computed 计算属性，将课程映射为传递给 StudyCard 所需的格式
    // note: 等待数据加载完成再返回，不然一直sleep
    const waitForDataLoad = async () => {
      while (!courseStore.isLoaded) {
        // JS promise 阻塞等待进程
        await new Promise(resolve => setTimeout(resolve, 200));
      }
    };
    await waitForDataLoad();

    cardDataList.value = courseStore.courses.map(course => ({
      cardName: course.courseName,
      teacherName: course.teacherName,
      description: course.courseDescription,
      views: `${course.viewNum} 已学习`,
      img: course.courseImage || '/default-image.jpg', // 如果没有图片则使用默认图片
      path: '/learning/xiangqing', // 默认路径
      courseId: course.courseId, // 包含 courseId
      folderId: course.folderId, // 包含 folderId
    }))
  }
  else if (props.cardType === '技能树') {
    // 手动写死的假数据
    // const fakeData = computed(() => [
    //   {
    //     id: '100',
    //     cardName: "大数据技术应用与实践",
    //     description: "系统学习大数据离线处理开发实践、大数据实时处理开发实践、大数据交互式OLAP多维分析开发",
    //     views: '40k已学习',
    //     img: icon1.value,
    //     path: '/learning/mindmap',
    //   },
    //   {
    //     id: '101',
    //     cardName: "大语言模型",
    //     description: "学习和应用大型语言模型，如GPT系列，掌握自然语言处理的基础和高级技术。",
    //     views: '25k已学习',
    //     img: icon2.value,
    //     path: '/learning/language-model',
    //   },
    //   {
    //     id: '102',
    //     cardName: "医疗问诊机器人",
    //     description: "通过该技术路线，学习者将首先掌握大模型技术及其在医疗领域的应用。",
    //     views: '5k已学习',
    //     img: icon3.value,
    //     path: '/learning/language',
    //   },
    // ])
    // 将 store 中的数据映射为 AppData 格式
    // note: 一个关键问题，因为 StudyHeader 和 SkillMarket 都使用了 useStudyTreeStore，所以可能刷新页面时会导致数据不同步，SkillMarket会读取到空数据（更新前的数据）因此通过判断 isLoaded 属性来判断是否已经加载过数据
    // 等待数据加载完成再返回，不然一直sleep
    const waitForDataLoad = async () => {
      while (!studyTreeStore.isLoaded) {
        // JS promise 阻塞等待进程
        await new Promise(resolve => setTimeout(resolve, 200));
      }
    };
    await waitForDataLoad();
    const zustandApps = computed(() =>
      studyTreeStore.studyTreeItems.map(item => ({
        id: item.id,
        cardName: item.name,
        description: item.description,
        views: `${Math.floor(Math.random() * 50)}k已学习`,
        img: item.imageUrl,
        path: `/learning/data/${item.id}`, // 在路径中添加 id 参数
      })),
    );

    // 合并假数据和从 store 中获取的数据
    cardDataList.value = [...zustandApps.value];
  }
}

// 生命周期钩子：在组件挂载时触发
onMounted(() => {
  fetchIcon();
  fetchCardData();
});

// 监听cardType属性的变化，重新获取数据
watch(() => props.cardType, () => {
  fetchIcon();
  fetchCardData();
});

// note: 监听studyTreeStore 和 courseStore 的变化，重新获取数据
watch(() => studyTreeStore.studyTreeItems, () => {
  fetchCardData();
});

watch(() => courseStore.courses, () => {
  fetchCardData();
});
</script>

<template>
  <div class="app-market">
    <a-row :gutter="[16, 16]">
      <a-col
        v-for="(app, index) in cardDataList"
        :key="index"
        :xs="12"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
      >
        <StudyCard :app="app" :card-type="cardType" />
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
/* 样式可以保留现有样式 */
.app-market {
  padding: 0 10px; /* 添加适当的内边距，避免卡片紧贴屏幕边缘 */
}
</style>
